import React, { Component } from 'react'
import lottie from 'lottie-web'

export default class LottieAnimation extends Component {
  render() {
    const { width = 300, height = '', className = '' } = this.props
    return <div className={`lottie-animation-box ${className}`} ref='root' style={{ width, height }} />
  }

  componentDidMount() {
    const { data, options = {} } = this.props
    let opts = {
      renderer: 'canvas',
      loop: true,
      autoplay: true,
      ...options,
    }
    if (typeof data === 'string') {
      opts.path = data
    } else {
      opts.animationData = data
    }
    opts.container = this.refs.root
    this.animation = lottie.loadAnimation(opts)
  }
}
